import { Icon } from '@arco-design/web-react';
import { CSSProperties } from 'react';

interface IRIconProps {
  size?:string
  color?:string
  profix?:string
  className?:string
  style?:CSSProperties
  onClick?:()=>void
}

interface propsInterface extends IRIconProps {
  name:string
}

const IconFont = Icon.addFromIconFontCn({ src: './iconfont.js' });

// 自定义图标组件
function RIcon(props:propsInterface) {
  const {name, style,className,size,color,...restProps } = props;
  return (
    <IconFont
      onClick={props.onClick}
      type={name}
      {...restProps}
      className={`active:scale-90 cursor-pointer rounded ${className}`}
      style={{fontSize: size || '24px', color: color || '#8b96d9',...style}}
    />
  )
}

// 音乐识别图标
export function RIconMusicRecognition(props:IRIconProps) {
  return (
    <RIcon onClick={props.onClick} name='icon-music-identify' {...props}></RIcon>
  )
}
// 设置图标
export function RIconSet(props:IRIconProps) {
  return (
    <RIcon name='icon-shezhi' {...props}></RIcon>
  )
}
// 搜索图标
export function RIconSearch(props:IRIconProps) {
  return (
    <RIcon name='icon-sousuo' {...props}></RIcon>
  )
}
// 主题图标
export function RIconTheme(props:IRIconProps) {
  return (
    <RIcon name='icon-zhutishezhi_moren' {...props}></RIcon>
  )
}
// 消息图标
export function RIconMessage(props:IRIconProps) {
  return (
    <RIcon name='icon-shouye' {...props}></RIcon>
  )
}

// 播放
export function RIconPlay(props:IRIconProps) {
  return (
    <RIcon name='icon-bofang' {...props}></RIcon>
  )
}

// 暂停
export function RIconPause(props:IRIconProps) {
  return (
    <RIcon name='icon-zanting' {...props}></RIcon>
  )
}
// 上一首
export function RIconPrev(props:IRIconProps) {
  return (
    <RIcon name='icon-xiayishou1' {...props}></RIcon>
  )
}

// 下一首
export function RIconNext(props:IRIconProps) {
  return (
    <RIcon name='icon-xiayishou' {...props}></RIcon>
  )
}

// 循环播放
export function RIconLoop(props:IRIconProps) {
  return (
    <RIcon name='icon-a-25px' {...props}></RIcon>
  )
}

// 顺序播放
export function RIconOrder(props:IRIconProps) {
  return (
    <RIcon name='icon-shunxubofang' {...props}></RIcon>
  )
}

// 随机播放
export function RIconRandom(props:IRIconProps) {
  return (
    <RIcon name='icon-suijibofang' {...props}></RIcon>
  )
}
// 静音图标
export function RIconMute(props:IRIconProps) {
  return (
    <RIcon name='icon-jingyin-L' {...props}></RIcon>
  )
}

// 音量低
export function RIconVolumeLow(props:IRIconProps) {
  return (
    <RIcon name='icon-yinliang1' {...props}></RIcon>
  )
}

// 音量中
export function RIconVolumeMedium(props:IRIconProps) {
  return (
    <RIcon name='icon-yinliang2' {...props}></RIcon>
  )
}

// 音量高
export function RIconVolumeHigh(props:IRIconProps) {
  return (
    <RIcon name='icon-yinliang3' {...props}></RIcon>
  )
}

// 音乐列表
export function RIconList(props:IRIconProps) {
  return (
    <RIcon name='icon-yinleliebiao' {...props}></RIcon>
  )
}
// 喜欢
export function RIconLike(props:IRIconProps) {
  return (
    <RIcon name='icon-xihuan1' {...props}></RIcon>
  )
}
// 喜欢-fill
export function RIconLikeFill(props:IRIconProps) {
  return (
    <RIcon name='icon-xihuan' {...props}></RIcon>
  )
}
//*展开
export function RIconExpand(props:IRIconProps) {
  return (
    <RIcon name='icon-zhankai' {...props}></RIcon>
  )
}
//* 收起
export function RIconCollapse(props:IRIconProps) {
  return (
    <RIcon name='icon-shousuo' {...props}></RIcon>
  )
}
//* 下载
export function RIconDownload(props:IRIconProps) {
  return (
    <RIcon name='icon-xiazai' {...props}></RIcon>
  )
}
//* 收藏
export function RIconFavorite(props:IRIconProps) {
  return (
    <RIcon name='icon-shoucang' {...props}></RIcon>
  )
}
//* 评论
export function RIconComment(props:IRIconProps) {
  return (
    <RIcon name='icon-pinglun' {...props}></RIcon>
  )
}

//* 菜单图标组

//* 发现
export function RIconDiscover(props:IRIconProps) {
  return (
    <RIcon name='icon-found' {...props}></RIcon>
  )
}
//*音乐库
export function RIconMusic(props:IRIconProps) {
  return (
    <RIcon name='icon-yinyueku' {...props}></RIcon>
  )
}










